<template>
  <div>
    <div v-show="isPlay">
      <div class="map-container">
        <div>
          <div @click="returnCh">
            <img v-if="pyName !== 'china'" class="returnImg" src="@/assets/images/return.png"/>
          </div>
          <div id="chinaMap" v-if="pyName === 'china'"></div>
          <div id="provinceMap" v-if="pyName !== 'china'"></div>
        </div>
      </div>
      <div class="videoContainer">
        <video class="fullscreenVideo" id="bgVideo" playsinline="" autoplay="" muted="" loop="">
          <source src="@/assets/videos/mapBgVideo.mp4" type="video/mp4">
        </video>
      </div>
    </div>
    <div v-show="!isPlay">
      <load-animation></load-animation>
    </div>
  </div>
</template>
<script>
import { cityArr, totalMap } from '@/assets/mapData/mapData'
import LoadAnimation from '@/components/LoadAnimation/index'

export default {
  components: {
    LoadAnimation
  },
  data () {
    return {
      // 全国数据
      totalMap: null,
      // 各个城市的数据
      cityArr: null,
      // 默认选择的城市 这是拼音
      pyName: 'china',
      myEchartsOfChina: null,
      // 保留一份省名的中文
      pyNameOfChinese: '',
      isPlay: false
    }
  },
  created () {
    this.totalMap = totalMap
    this.cityArr = cityArr
  },
  // 页面挂载完成后调用
  mounted () {
    const _this = this
    this.chinaMapFun()
    setTimeout(function () {
      _this.isPlay = true
    }, 5000)
  },
  methods: {
    chinaMapFun (cityName) {
      let mapData = []
      for (let i = 0; i < this.totalMap.length; i++) {
        const obj = { value: 0, dataItem: [] }
        obj.name = this.totalMap[i].areaName
        obj.value = this.totalMap[i].areaValue
        if (this.totalMap[i].children) {
          obj.children = this.totalMap[i].children
        }
        mapData.push(obj)
      }
      // 这里进行筛选传进来的省份数据
      if (this.pyNameOfChinese) {
        for (let j = 0; j < mapData.length; j++) {
          if ((mapData[j].name === this.pyNameOfChinese) && mapData[j].children) {
            mapData = mapData[j].children.map(item => {
              return {
                name: item.areaName,
                value: item.areaValue
              }
            })
          }
        }
      }
      if (this.pyName === 'china') {
        this.myEchartsOfChina = this.$echarts.init(document.getElementById('chinaMap'))
      } else {
        this.myEchartsOfChina = this.$echarts.init(document.getElementById('provinceMap'))
      }

      // 显示加载动画
      this.myEchartsOfChina.showLoading()
      if (this.pyName === 'china') {
        const province = require('../../../node_modules/echarts/map/json/china.json')
        // 注册地图数据
        this.$echarts.registerMap(this.pyName, province)
      } else {
        // 单独引入其他省份的地图  注意：registerMap方法的第一参数要和引入的省名相同
        const province = require('../../../node_modules/echarts/map/json/province/' + this.pyName + '.json')
        // 注册地图数据
        this.$echarts.registerMap(this.pyName, province)
      }
      this.myEchartsOfChina.hideLoading()

      const provinceOptions = {
        title: {
          show: true, // 是否显示标题组件
          // text: '拟将足迹试天下', // 主标题文本
          textStyle: {
            color: '#f9e9cd',
            fontWeight: 600,
            fontSize: 23
          },
          subtext: '',
          left: 'center',
          top: '5%'
        },
        // 底部小导航图标
        visualMap: {
          // text: ['图例'],
          textStyle: {
            color: '#f9e9cd'
          },
          orient: 'horizontal',
          itemWidth: 15,
          textGap: 2,
          // calculable: false,
          show: false,
          left: 'center',
          y: 'bottom',
          splitList: [
            { start: 1, end: 100, label: '1-100', color: 'rgb(235,70,126)' },
            { start: 101, end: 200, label: '101-200', color: 'rgb(238,35,121)' },
            { start: 201, label: '>=201', color: 'rgb(250,10,105)' }
          ]
        },
        backgroundColor: '', // 图表背景色
        series: [
          {
            type: 'map', // 指定是地图类型
            map: this.pyName, // 和上面registerMap中的第一个参数值一致才可以正常加载地图
            zoom: 1.2,
            roam: false, // 是否开启平游或缩放
            selectedMode: 'single', // 选中模式，'single'表示单选，或者'multiple'表示多选。
            itemStyle: {
              normal: {
                label: { show: true },
                areaColor: '', // 地图区域颜色
                borderWidth: 1.5, // 地图边界线条宽度
                borderColor: '#f9e8d0' // 地图边界线条颜色
              },
              emphasis: {
                label: { show: true },
                // 强调的样式，也就是鼠标移入后的样式==高亮状态下的多边形和标签样式。
                areaColor: '#f26b1f'
              }
            },
            label: {
              normal: {
                show: true, // 是否显示标签，这里显示的就是省份的名字。默认就是false
                textStyle: {
                  color: '#f9e9cd', // 文字颜色
                  fontSize: 14 // 文字大小
                }
              },
              emphasis: {
                show: false // 在鼠标移入时，是否显示，如果不写，默认是显示的
              }
            },
            data: mapData // 各省地图数据导入
          }
        ]
      }

      // 设置各个省份地图的参数
      const cityOptions = {
        // 底部小导航图标
        visualMap: {
          // text: ['图例'],
          textStyle: {
            color: '#f9e9cd'
          },
          orient: 'horizontal',
          itemWidth: 15,
          textGap: 2,
          // calculable: false,
          show: false,
          left: 'center',
          y: 'bottom',
          splitList: [
            { start: 1, label: '1-100', color: 'rgb(235,80,126)' }
          ]
        },
        backgroundColor: '', // 图表背景色
        series: [
          {
            type: 'map',
            map: this.pyName,
            zoom: 1.2,
            roam: true, // 是否开启平游或缩放
            selectedMode: 'single',
            itemStyle: {
              normal: {
                label: { show: true },
                areaColor: 'transparent', // 地图区域颜色
                borderWidth: 1.5, // 地图边界线条宽度
                borderColor: '#f9e8d0' // 地图边界线条颜色
              },
              emphasis: {
                label: { show: true },
                // 强调的样式，也就是鼠标移入后的样式==高亮状态下的多边形和标签样式。
                areaColor: '#f26b1f'
              }
            },
            label: {
              normal: {
                show: true, // 是否显示标签，这里显示的就是省份的名字。默认就是false
                textStyle: {
                  color: '#f9e9cd', // 文字颜色
                  fontSize: 14 // 文字大小
                }
              },
              emphasis: {
                show: true // 在鼠标移入时，是否显示，如果不写，默认是显示的
              }
            },
            // 数据对不上 省下面的地区对不上
            data: mapData
          }
        ]
      }

      // 判断是否是各个省份
      const _this = this
      if (this.pyName === 'china') {
        this.myEchartsOfChina.setOption(provinceOptions)
        this.myEchartsOfChina.on('click', function (params) {
          if (params.dataIndex !== 34) {
            _this.lookVideoGo(params.name)
          }
        })
      } else {
        this.myEchartsOfChina.setOption(cityOptions)
      }
    },

    /* 传过来的参数是省份名 */
    lookVideoGo (cityName) {
      this.pyNameOfChinese = cityName
      // this.myEchartsOfChina.clear(); // 清空当前实例，会移除实例中所有的组件和图表。
      this.myEchartsOfChina.dispose() // 销毁后实例无法在使用

      // 获取城市拼音
      for (let i = 0, len = this.cityArr[0].length; i < len; i++) {
        if (cityName === this.cityArr[0][i]) {
          // 获取得城市拼音
          this.pyName = this.cityArr[1][i]
          // 使用nextTick Api 防止echarts初始化时避免节点不存在的报错
          this.$nextTick(() => {
            this.chinaMapFun(this.pyName)
          })
          break
        } else {
          // console.warn('没有找到相应城市')
        }
      }
    },
    /* 点击返回全国 */
    returnCh () {
      // this.myEchartsOfChina.clear(); // 清空当前实例，会移除实例中所有的组件和图表。
      this.myEchartsOfChina.dispose() // 销毁后实例 这里使用dispose防止残留
      this.pyName = 'china'
      this.pyNameOfChinese = ''
      // 使用nextTick Api 防止echarts初始化时避免节点不存在的报错
      this.$nextTick(() => {
        this.chinaMapFun()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.map-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  #chinaMap, #provinceMap {
    width: 100vw;
    height: 100vh;
  }

  // 返回箭头
  .returnImg {
    position: fixed;
    top: 20px;
    left: 20px;
    cursor: pointer;
    width: 50px;
    z-index: 1000;
  }
}

.videoContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -100;

  .fullscreenVideo {
    width: 100%;
    height: 100%;
    object-fit: cover
  }
}
</style>
